<template>
  <div class="quality-model-box flex-between">
    <div class="quality-table-box">
      <el-table class="table" :data="qualityData.qualityData" border>
        <el-table-column label="组分名" width="150" align="center">
          <template #default="scope">
            <el-select v-model="scope.row.kcdm" placeholder="请选择">
              <el-option label="暂无" value="暂无"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="组分值" align="center">
          <template #default="scope">
            <el-input v-model="scope.row.kcdm" placeholder="请输入" />
          </template>
        </el-table-column>
        <el-table-column label="组分单位" align="center">
          <template #default="scope">
            <el-select v-model="scope.row.kcdm" placeholder="请选择">
              <el-option label="暂无" value="暂无"></el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="quality-average-box">
      <div class="check-box fx-center">
        <el-checkbox v-model="qualityData.checked" label="平均含量" size="large" />
      </div>
      <template v-if="qualityData.checked">
        <div class="input-box">
          <div>矿石类型描述：</div>
          <el-input v-model="qualityData.textarea" :rows="3" type="textarea" placeholder="请输入" />
        </div>
        <div class="input-box">
          <div>矿石品级描述：</div>
          <el-input v-model="qualityData.textarea" :rows="3" type="textarea" placeholder="请输入" />
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  qualityData: {
    type: Object,
    default: () => {}
  }
});
</script>
